<template>
  <div>
      <h4>角色信息一览</h4>
      <el-table
            :data="roleCutObj.list"
            border
            style="width: 100%">

            <el-table-column
            prop="name"
            label="角色名称"
            width="180">
            </el-table-column>

            
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row.id)" type="primary" size="small">删除角色</el-button>
                    <el-button @click="findInfo(scope.row.id)" type="primary" size="small">查看角色信息</el-button>
                    <el-button @click="findById(scope.row.id)" type="primary" size="small">修改角色权限</el-button>
                </template>
                </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
            @current-change="pageClick"
            :current-page.sync="curr"
            :page-size="3"
            layout="prev, pager, next, jumper"
            :total="roleCutObj.total">
            </el-pagination>
        </div>

        <el-row>
            <el-col :span="4">
                <el-button type="info" @click="setShowRoleAdd(true)">添加</el-button>
            </el-col>

        </el-row>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex"
export default {
    data(){
        return {
            curr:1 //当前页码
        }
    },
     computed:{
        ...mapState('role',['roleCutObj','param'])
    },
    methods:{
        ...mapMutations('role',['setRoleCutObj','setRoleObj','setShowRoleAdd','setShowRoleInfo','setShowRoleUpdate']),
        ...mapActions('role',['cutAllRoleList']),
        pageClick(pn){ //点击页码，显示分页查询信息
            this.param.pageNO = pn;
            this.cutAllRoleList();
        },
        async del(id){ //删除角色
            var info = await this.ajax.getSubmit("/project/role/del",{id:id});
            if(info == "ok"){//如果返回值为ok，重新查询第一页
                this.curr = 1;
                this.param.pageNO = 1;
                this.cutAllRoleList();
            }
        },
        async findInfo(id){//按ID查询用户信息，弹出显示用户详情弹出层
            var roleObj = await this.ajax.getSubmit("/project/role/findById",{id:id});
            this.setRoleObj(roleObj);
            this.setShowRoleInfo(true);
        },
        async findById(id){//按ID查询用户信息，弹出修改用户弹出层
            var roleObj = await this.ajax.getSubmit("/project/role/findById",{id:id});
            this.setRoleObj(roleObj);
            this.setShowRoleUpdate(true);
        }
    },
    created(){
        this.cutAllRoleList();
    }

}
</script>

<style>

</style>